<template>
  <div class="tutorial-container">
    <h1 class="title">🚀 Vue 3 响应式魔法学院</h1>

    <!-- 第一部分：ref 基础 -->
    <section class="lesson-section">
      <h2 class="lesson-title">📦 第一关：ref - 魔法盒子</h2>
      <p class="lesson-desc">ref 就像一个魔法盒子，可以装任何类型的宝贝！</p>

      <div class="demo-box">
        <h3>🎮 魔法计算器</h3>
        <div class="counter-demo">
          <p>
            当前魔法值：<span class="magic-number">{{ magicPower }}</span>
          </p>
          <button @click="magicPower++" class="magic-btn">✨ 增加魔法</button>
          <button @click="magicPower--" class="magic-btn">💫 减少魔法</button>
          <button @click="magicPower = 0" class="magic-btn">🔄 重置魔法</button>
        </div>

        <div class="magic-status">
          <p v-if="magicPower > 10" class="status-strong">🔥 魔法强大！</p>
          <p v-else-if="magicPower > 0" class="status-normal">✨ 魔法正常</p>
          <p v-else class="status-weak">💤 魔法耗尽</p>
        </div>
      </div>
    </section>

    <!-- 第二部分：reactive 对象 -->
    <section class="lesson-section">
      <h2 class="lesson-title">🎯 第二关：reactive - 魔法背包</h2>
      <p class="lesson-desc">reactive 就像一个魔法背包，可以装很多相关的道具！</p>

      <div class="demo-box">
        <h3>🎒 冒险者背包</h3>
        <div class="inventory">
          <div class="inventory-item">
            <span>🗡️ 武器：</span>
            <select v-model="adventurer.weapon">
              <option>木剑</option>
              <option>铁剑</option>
              <option>魔法剑</option>
            </select>
          </div>
          <div class="inventory-item">
            <span>🛡️ 防具：</span>
            <select v-model="adventurer.armor">
              <option>布衣</option>
              <option>皮甲</option>
              <option>铁甲</option>
            </select>
          </div>
          <div class="inventory-item">
            <span>💰 金币：</span>
            <input type="number" v-model.number="adventurer.gold" min="0" />
          </div>
          <div class="inventory-item">
            <span>⚡ 等级：</span>
            <input type="number" v-model.number="adventurer.level" min="1" max="100" />
          </div>
        </div>

        <div class="adventurer-status">
          <h4>🦸‍♂️ 角色状态</h4>
          <p>装备：{{ adventurer.weapon }} + {{ adventurer.armor }}</p>
          <p>财富：{{ adventurer.gold }} 金币</p>
          <p>实力：{{ adventurer.level }} 级</p>
          <p class="power-level">
            战斗力：
            <span :class="getPowerLevelClass()">
              {{ calculatePower() }}
            </span>
          </p>
        </div>
      </div>
    </section>

    <!-- 第三部分：computed 计算属性 -->
    <section class="lesson-section">
      <h2 class="lesson-title">🧮 第三关：computed - 魔法预言</h2>
      <p class="lesson-desc">computed 就像魔法预言，会自动根据变化重新计算！</p>

      <div class="demo-box">
        <h3>🔮 购物预言器</h3>
        <div class="shopping-demo">
          <div class="item-input">
            <label>🍎 苹果数量：</label>
            <input type="number" v-model.number="shopping.apple" min="0" />
          </div>
          <div class="item-input">
            <label>🍌 香蕉数量：</label>
            <input type="number" v-model.number="shopping.banana" min="0" />
          </div>
          <div class="item-input">
            <label>🍊 橙子数量：</label>
            <input type="number" v-model.number="shopping.orange" min="0" />
          </div>

          <div class="shopping-result">
            <h4>📊 预言结果</h4>
            <p>总数量：{{ totalItems }} 个水果</p>
            <p>总价格：{{ totalPrice }} 元</p>
            <p>平均价格：{{ averagePrice }} 元/个</p>
            <p class="discount" v-if="totalPrice > 50">
              🎉 恭喜！满50元享受9折优惠：{{ discountedPrice }} 元
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 第四部分：watch 监听器 -->
    <section class="lesson-section">
      <h2 class="lesson-title">👁️ 第四关：watch - 魔法监视</h2>
      <p class="lesson-desc">watch 就像魔法监视，会观察变化并做出反应！</p>

      <div class="demo-box">
        <h3>🚨 魔法警报器</h3>
        <div class="watch-demo">
          <div class="temperature-control">
            <label>🌡️ 当前温度：</label>
            <input type="range" v-model.number="temperature" min="0" max="100" />
            <span class="temp-value">{{ temperature }}°C</span>
          </div>

          <div class="temp-alerts">
            <div v-for="alert in alerts" :key="alert.id" class="alert-item" :class="alert.type">
              {{ alert.message }}
            </div>
          </div>

          <button @click="alerts = []" class="clear-alerts">清除警报</button>
        </div>
      </div>
    </section>

    <!-- 知识总结 -->
    <section class="lesson-summary">
      <h2 class="summary-title">🎓 魔法咒语总结</h2>
      <div class="summary-grid">
        <div class="summary-card">
          <h3>📦 ref</h3>
          <p>包装基本类型</p>
          <code>.value</code>
        </div>
        <div class="summary-card">
          <h3>🎯 reactive</h3>
          <p>创建响应式对象</p>
          <code>直接访问属性</code>
        </div>
        <div class="summary-card">
          <h3>🧮 computed</h3>
          <p>自动计算值</p>
          <code>缓存计算结果</code>
        </div>
        <div class="summary-card">
          <h3>👁️ watch</h3>
          <p>监听变化</p>
          <code>执行副作用</code>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'

// 🎮 第一关：ref 魔法盒子
const magicPower = ref(5)

// 🎯 第二关：reactive 魔法背包
const adventurer = reactive({
  weapon: '木剑',
  armor: '布衣',
  gold: 100,
  level: 1,
})

// 计算战斗力
const calculatePower = () => {
  const weaponPower = { 木剑: 10, 铁剑: 20, 魔法剑: 50 }[adventurer.weapon] || 0
  const armorPower = { 布衣: 5, 皮甲: 10, 铁甲: 20 }[adventurer.armor] || 0
  return weaponPower + armorPower + adventurer.level * 5
}

// 获取战斗力等级样式
const getPowerLevelClass = () => {
  const power = calculatePower()
  if (power > 50) return 'power-high'
  if (power > 20) return 'power-medium'
  return 'power-low'
}

// 🧮 第三关：computed 魔法预言
const shopping = reactive({
  apple: 0,
  banana: 0,
  orange: 0,
})

const totalItems = computed(() => shopping.apple + shopping.banana + shopping.orange)

const totalPrice = computed(() => {
  return shopping.apple * 3 + shopping.banana * 2 + shopping.orange * 4
})

const averagePrice = computed(() => {
  const total = totalItems.value
  return total > 0 ? (totalPrice.value / total).toFixed(2) : 0
})

const discountedPrice = computed(() => (totalPrice.value * 0.9).toFixed(2))

// 👁️ 第四关：watch 魔法监视
const temperature = ref(25)
const alerts = ref<Array<{ id: number; message: string; type: string }>>([])
let alertId = 0

// 监听温度变化
watch(temperature, (newTemp, oldTemp) => {
  if (newTemp > 80) {
    alerts.value.push({
      id: alertId++,
      message: `🚨 高温警报！温度达到 ${newTemp}°C，请立即降温！`,
      type: 'danger',
    })
  } else if (newTemp > 60) {
    alerts.value.push({
      id: alertId++,
      message: `⚠️ 警告！温度偏高 ${newTemp}°C，请注意！`,
      type: 'warning',
    })
  } else if (newTemp < 10) {
    alerts.value.push({
      id: alertId++,
      message: `❄️ 低温警报！温度过低 ${newTemp}°C！`,
      type: 'info',
    })
  }

  // 如果温度变化剧烈
  if (Math.abs(newTemp - oldTemp) > 20) {
    alerts.value.push({
      id: alertId++,
      message: `🌡️ 温度剧烈变化！从 ${oldTemp}°C 变为 ${newTemp}°C`,
      type: 'warning',
    })
  }
})
</script>

<style scoped>
.tutorial-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.title {
  text-align: center;
  color: #2c3e50;
  font-size: 2.5em;
  margin-bottom: 40px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.lesson-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  color: white;
}

.lesson-title {
  font-size: 1.8em;
  margin-bottom: 10px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.lesson-desc {
  font-size: 1.1em;
  margin-bottom: 20px;
  opacity: 0.9;
}

.demo-box {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  padding: 25px;
  color: #333;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.demo-box h3 {
  color: #4a5568;
  margin-bottom: 20px;
  font-size: 1.3em;
}

/* 计数器样式 */
.counter-demo {
  text-align: center;
}

.magic-number {
  font-size: 2em;
  font-weight: bold;
  color: #e53e3e;
  animation: pulse 1s infinite;
}

.magic-btn {
  background: linear-gradient(45deg, #ff6b6b, #ee5a24);
  color: white;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1em;
  transition: all 0.3s ease;
}

.magic-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.magic-status p {
  font-size: 1.2em;
  font-weight: bold;
  margin: 10px 0;
}

.status-strong {
  color: #e53e3e;
}
.status-normal {
  color: #dd6b20;
}
.status-weak {
  color: #718096;
}

/* 背包样式 */
.inventory {
  display: grid;
  gap: 15px;
  margin-bottom: 20px;
}

.inventory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: #f7fafc;
  border-radius: 8px;
  border-left: 4px solid #4299e1;
}

.inventory-item select,
.inventory-item input {
  padding: 5px 10px;
  border: 2px solid #e2e8f0;
  border-radius: 5px;
  font-size: 1em;
}

.adventurer-status {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.power-level {
  font-size: 1.3em;
  font-weight: bold;
}

.power-high {
  color: #48bb78;
}
.power-medium {
  color: #ed8936;
}
.power-low {
  color: #f56565;
}

/* 购物样式 */
.shopping-demo {
  max-width: 400px;
  margin: 0 auto;
}

.item-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px;
  background: #f7fafc;
  border-radius: 8px;
}

.item-input input {
  width: 80px;
  padding: 8px;
  border: 2px solid #e2e8f0;
  border-radius: 5px;
  text-align: center;
  font-size: 1.1em;
}

.shopping-result {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
  text-align: center;
}

.discount {
  background: #48bb78;
  color: white;
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
  font-weight: bold;
}

/* 温度监视样式 */
.temperature-control {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  padding: 15px;
  background: #f7fafc;
  border-radius: 10px;
}

.temp-value {
  font-size: 1.5em;
  font-weight: bold;
  color: #e53e3e;
  min-width: 60px;
}

.temp-alerts {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 15px;
}

.alert-item {
  padding: 10px;
  margin: 5px 0;
  border-radius: 5px;
  font-weight: bold;
  animation: slideIn 0.5s ease;
}

.alert-item.danger {
  background: #fed7d7;
  color: #c53030;
  border-left: 4px solid #e53e3e;
}

.alert-item.warning {
  background: #feebc8;
  color: #dd6b20;
  border-left: 4px solid #ed8936;
}

.alert-item.info {
  background: #bee3f8;
  color: #2b6cb0;
  border-left: 4px solid #4299e1;
}

.clear-alerts {
  background: #718096;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  transition: background 0.3s ease;
}

.clear-alerts:hover {
  background: #4a5568;
}

/* 总结样式 */
.lesson-summary {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  border-radius: 15px;
  padding: 30px;
  margin-top: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.summary-title {
  text-align: center;
  color: #2d3748;
  font-size: 2em;
  margin-bottom: 25px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.summary-card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.summary-card:hover {
  transform: translateY(-5px);
}

.summary-card h3 {
  color: #4a5568;
  margin-bottom: 10px;
  font-size: 1.3em;
}

.summary-card code {
  background: #f7fafc;
  padding: 5px 10px;
  border-radius: 5px;
  color: #e53e3e;
  font-weight: bold;
}

/* 动画 */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .tutorial-container {
    padding: 10px;
  }

  .title {
    font-size: 2em;
  }

  .lesson-section {
    padding: 20px;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }
}
</style>
